<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增数据</title>
  <script>
    function  showUserTip1() {
      document.getElementById('userTip1').innerHTML = '<b style="color: lightgray;">课程号不能为空</b>';
    }

    function  showUserTip2() {
      document.getElementById('userTip2').innerHTML = '<b style="color: lightgray;">课程名不能为空</b>';
    }

    function  showUserTip3() {
      document.getElementById('userTip3').innerHTML = '<b style="color: lightgray;">总学时不能为空</b>';
    }

    function  showUserTip4() {
      document.getElementById('userTip4').innerHTML = '<b style="color: lightgray;">总学分不能为空</b>';
    }

    function  checkUser1() {
      var name = document.getElementById('1').value;
      if (name === ''){
        document.getElementById('userTip1').innerHTML = '<b style="color: red">课程号不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip1').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }

    function  checkUser2() {
      var name = document.getElementById('2').value;
      if (name === ''){
        document.getElementById('userTip2').innerHTML = '<b style="color: red">课程名不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip2').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }

    function  checkUser3() {
      var name = document.getElementById('3').value;
      if (name === ''){
        document.getElementById('userTip3').innerHTML = '<b style="color: red">总学时不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip3').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }

        function  checkUser3() {
      var name = document.getElementById('3').value;
      if (name === ''){
        document.getElementById('userTip3').innerHTML = '<b style="color: red">总学分不能为空</b>'
        return 0;
      }else{
        document.getElementById('userTip3').innerHTML = '<b style="color:  green"> ok </b>'
        return 1;
      }
    }
  </script>
</head>
<body>
<h3>请输入要插入记录的相关信息</h3>
<form id="form1" name="form1" method="post" action="/addwx4">
<!--  <label> 标签为 input 元素定义标注（标记）。-->
<!--label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。-->
<!--<label> 标签的 for 属性应当与相关元素的 id 属性相同。-->
  <label>课程号：
  <input type="text" name="stu_id" id="1" placeholder="输入课程号" onfocus="showUserTip1()" onblur="checkUser1()"/>
          <span id="userTip1"></span>
  </label>
  <p>
    <label>课程名：
    <input type="text" name="stu_name" id="2" placeholder="输入课程名" onfocus="showUserTip2()" onblur="checkUser2()"/>
      <span id="userTip2"></span>
    </label>
  </p>
  <p>
    <label>课程类型：
     <select type="text" name="stu_sex">
         <option value ="必修">必修</option>
         <option value ="通选">通选</option>
         <option value ="限选">限选</option>
    </select>
    </label>
  </p>
  <p>
    <label>总学时：
    <input type="text" name="stu_age" id="3" placeholder="输入总学时" onfocus="showUserTip3()" onblur="checkUser3()"/>
      <span id="userTip3"></span>
    </label>
  </p>
    <p>
    <label>总学分：
    <input type="text" name="stu_profession" id="4" placeholder="输入总学分" onfocus="showUserTip4()" onblur="checkUser4()"/>
      <span id="userTip4"></span>
    </label>
  </p>
  <p>
    <label>
    <input type="submit" name="button"  value="提交" />
    </label>
    <label>
    <input type="reset" name="button2"  value="重置" />
    </label>
    <br />
  </p>
</form>
<p>&nbsp; </p>
</body>
</html>